{% load static %}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
{#    <link rel="stylesheet"#}
{#          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">#}
{##}
{#    <!-- Latest compiled and minified JavaScript -->#}
{#    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>#}
{##}
{#    <!-- (Optional) Latest compiled and minified JavaScript translation files -->#}
{#    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>#}
    <style>
        #box {
            width: 800px;
            border: 0px solid rebeccapurple;
            background-color: powderblue;
            margin: 0 auto;
            text-align: center;
        }

        td {
            padding-left: 28px;
        }
    </style>
{#    <script type="text/javascript" src="{% static 'jquery-1.2.6.js' %}"></script>#}


</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">天气预报</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" data-size="5">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    地点
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                    {% for all in alls %}
                        <a class="dropdown-it" href="#" value="{{ all.site }}">{{ all.site }}</a>
                    {% endfor %}
                </div>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    年份
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" value='2017' id="nian" onclick="nian">2017</a>
                    <a class="dropdown-item" value='2018' id="nian" onclick="nian">2018</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    月份
                </a>
                <div class="dropdown-men" aria-labelledby="navbarDropdown">
                    <a class="dropdown-ite" href="#" value='01'>一月</a>
                    <a class="dropdown-ite" href="#" value='02'>二月</a>
                    <a class="dropdown-ite" href="#" value='03'>三月</a>
                    <a class="dropdown-ite" href="#" value='04'>四月</a>
                    <a class="dropdown-ite" href="#" value='05'>五月</a>
                    <a class="dropdown-ite" href="#" value='06'>六月</a>
                    <a class="dropdown-ite" href="#" value='07'>七月</a>
                    <a class="dropdown-ite" href="#" value='08'>八月</a>
                    <a class="dropdown-ite" href="#" value='09'>九月</a>
                    <a class="dropdown-ite" href="#" value='10'>十月</a>
                    <a class="dropdown-ite" href="#" value='11'>十一月</a>
                    <a class="dropdown-ite" href="#" value='12'>十二月</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#"></a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="xx">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
<div id="box">
    <table>
        <tr>
            <td>地点</td>
            <td>时间</td>
            <td>天气</td>
            <td>最高气温</td>
            <td>最低气温</td>
            <td>风力</td>
            <td>风向</td>
        </tr>

        {% for all in p %}
            <tr>
                <td>{{ all.site }}</td>
                <td>{{ all.days }}</td>
                <td>{{ all.weather }}</td>
                <td>{{ all.maxs }}</td>
                <td>{{ all.mins }}</td>
                <td>{{ all.Wind }}</td>
                <td>{{ all.direction }}</td>
            </tr>
        {% endfor %}


    </table>

</div>
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        {% if p.has_previous %}
            <li class="page-item"><a class="page-link" href="/?num={{ p.previous_page_number }}">上页</a></li>
        {% endif %}
        {% if p.has_next %}
            <li class="page-item"><a class="page-link" href="/?num={{ p.next_page_number }}">下页</a></li>
        {% endif %}


    </ul>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
<script>
    window.onload = function f() {

        alert('a')
        function nian() {
            var nian = $('.dropdown-item').value


            {#var yue= $('.dropdown-ite').val()#}
            {#var di= $('.dropdown-it').val()#}
            if (name.length !== 0) {
                console.log(nian);
                $.ajax({
                    url: '{% url 'aa' %}',
                    data: ({
                        'nian': nian,
                        {#'yue':yue,#}
                        {#'di':di,#}
                    }),
                    {#type: 'POST',#}
                    success: function (data) {
                        var dataa = JSON.parse(data)
                        console.log(dataa);
                        var html = '';
                        for (var i = 0; i < dataa.length; i++) {
                            //html+='<tr>'<td>'</td>','<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td></tr>'
                            html += '<tr>'
                            '<td>' + dataa[i].site + '</td>'
                            '<td>' + dataa[i].days + '</td>'
                            '<td>' + dataa[i].weather + '</td>'
                            '<td>' + dataa[i].maxs + '</td>'
                            '<td>' + dataa[i].mins + '</td>'
                            '<td>' + dataa[i].direction + '</td>'
                            '</tr>'
                        }
                        $("#box").html(
                            html
                        )
                    },
                    error: function () {
                        alert('失败')
                    }
                })
            }

        }

    }


</script>
</body>
</html>